<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="spring" uri="http://www.springframework.org/tags"%>
<%@ taglib prefix="form" uri="http://www.springframework.org/tags/form"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt"%>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions"%>
<html lang="zh-cn">
<head>
    <meta charset="utf-8">
    <meta content="yes" name="apple-mobile-web-app-capable">
    <meta content="yes" name="apple-touch-fullscreen">
    <meta content="telephone=no,email=no" name="format-detection">
    <link rel="stylesheet" href="${ctx }/res/css/main.css">
    <link rel="stylesheet" href="${ctx }/res/css/plugins.css">
    <title>软装到家</title>
    <script type="text/javascript" src="${ctx }/res/js/lib.js"></script>
    <link rel="stylesheet" href="${ctx }/res/hplus/js/plugins/layer/skin/layer.css">
     <style type="text/css">
    	.form-groups .form-input.upload {
	      background: url("${ctx}/res/img/icon/upload.jpg") left top/100% 100% no-repeat; 
	    }
	    
	    .my-uploadImg {
	    	width:120px;
	    	height:120px;
	    }
	    
	    .layui-layer-dialog .layui-layer-content {
			color:black;
		}
	    
    </style>
</head>
<body>
 <div class="simple-nav w-1200 margin-0-auto reg-nav">
    <img class="fl reg-logo" src="${ctx }/res/img/icon/reg-logo.png">
    <span class="fr text-black f12">我已经注册,现在就<a class="text-red" href="${ctx }/user/login">登录</a></span>
</div>
<div class="reg-body w-1200 margin-0-auto">
    <div class="reg-step clear">
        <div class="clear margin-0-auto dis-table">
        <span class="active step-item" style="z-index:100;">
            <span class="info-text">完善信息</span>
            <span class="bar"></span>
        </span>
        <span class="step-item" style="z-index:101;">
            <span class="info-text">缴费</span>
            <span class="bar"></span>
        </span>
        <span class="step-item" style="z-index:103;">
            <span class="info-text">注册完成</span>
        </span>
        </div>
    </div>
    <form id='registerForm' method="post">
    <div class="form-groups reg-simple">
        <div class="inner-box">
        <h1 class="form-groups-title">基本信息</h1>
        <div class="form-controller">
            <label class="form-label icon-required">公司名称:</label>
            <input class="form-input" name="name" required>
        </div>
        <div class="form-controller">
            <label class="form-label icon-required">联系人:</label>
            <input class="form-input" name="realName" required>
        </div>
        <div class="form-controller">
            <label class="form-label icon-required">手机号:</label>
            <input class="form-input" name="mobile" id="mobile" required>
        </div>
        <div class="form-controller">
            <label class="form-label icon-required">验证码:</label>
            <input class="form-input input-xs" name="valicode" required>
            <button class="form-input-addon btn get-code" onclick="return getSmsCode(this);">获取验证码</button>
        </div> 
        <div class="form-controller">
            <label class="form-label icon-required">公司所在地:</label>
            <select class="form-input" name="province.id" id="provinceId" required>
            	<option value="">请选择省份</option>
                <c:forEach items="${provinces }" var="p">
					<option value="${p.id }">${p.name }</option>
				</c:forEach>
            </select>
        </div>
        <div class="form-controller">
            <label class="form-label icon-required">公司所在城市:</label>
            <select class="form-input" name="city.id" id="cityId" required>
                <option value="">请选择城市</option>
            </select>
        </div>
         <div class="form-controller">
            <label class="form-label icon-required">公司所在地区:</label>
             <select class="form-input" name="district.id" id="districtId">
                <option value="">请选择区县</option>
            </select>
        </div>
        <div class="form-controller">
            <label class="form-label icon-required">登录密码:</label>
            <input class="form-input" type="password" name="password" required>
        </div>
        <div class="form-controller">
            <label class="form-label icon-required">确认密码:</label>
            <input class="form-input" type="password" name="passwordConfirm" required>
        </div>
        <!-- 
        <div class="form-controller">
            <label class="form-label icon-required">推荐人:</label>
            <input class="form-input" type="text" name="recUserName">
        </div>
         -->
        <div class="form-controller">
            <label class="form-label " style="margin-right: 10px;" >&nbsp;</label>
            <label class="radio-elem"><input  type="checkbox"><i class="radio-icon"></i>我已同意并阅读</label>
            <a class="argument-link" href="#">《软装到家在线服务协议》</a>
        </div>   
        <div class="form-controller">
            <label class="form-label">&nbsp;</label>
            <button class=" btn btn-primary submit" onclick="return form_submit();">注册</button>
        </div>
        </div>
    </div>
    </form>
</div>
<div class="login-foot w-1200 margin-0-auto">
    <div class="links">
        <a href="#">关于我们</a>
        <a href="#">联系我们</a>
        <a href="#">法律声明</a>
        <a href="#">人才招聘</a>
        <a href="#">手机欧工</a>
        <a href="#">友情链接</a>
        <a href="#">English Site</a>
    </div>
    <div class="copyright">Copyright © 2016 ogmall.com 欧工国际软装 版权所有</div>
</div><script type="text/javascript">

    function renderPwdType(length) {
        $(".js-password-type span").removeClass('active');
        if (length <= 6 && length > 0) {
            return $(".js-password-type span").eq(0).addClass('active');
        } else if (length <= 11 && length >= 7) {
            return $(".js-password-type span").eq(1).addClass('active');
        } else if (length >= 12) {
            return $(".js-password-type span").eq(2).addClass('active');
        } else {
            $(".js-password-type span").removeClass('active');
        }
    }
    $(function () {
        $(".js-password").on("keyup",_.debounce(function () {
            var pwdLen = $(".js-password").val().replace("/\s/g","").length;
            renderPwdType(pwdLen)
        },100))
    })
</script>
<script type="text/javascript" src="${ctx }/res/js/plugins.js"></script>
<script type="text/javascript" src="${ctx }/res/js/common.js"></script>
<script type="text/javascript" src="${ctx }/res/js/modules.js"></script>
<script src="${ctx }/res/hplus/js/plugins/layer/layer.min.js"></script>
<script type="text/javascript">
    $(document).ready(function () {
        $('.tab-box').tab();  
    });
    
    $('#provinceId').change(function() {
    	var provinceId = $(this).val();
    	$('#cityId').html('');
    	$('#districtId').html('');
    	if (provinceId != '') {
    		$.ajax({
    			url: "${ctx}/user/findArea?provinceId=" + provinceId,
    			dataType: "json",
    			success: function(array) {
    				$('#cityId').append('<option value="">城市</option>');
    				for (var i = 0; i < array.length; i++) {
    					var obj = array[i];
    					var option = '<option value="' + obj.id + '">' + obj.name + '</option>';
    					$('#cityId').append(option);	
    				}
    			}
    		});
    	}
    	
    });

    $('#cityId').change(function() {
    	var cityId = $(this).val();
    	$('#districtId').html('');
    	if (cityId != '') {
    		$.ajax({
    			url: "${ctx}/user/findArea?cityId=" + cityId,
    			dataType: "json",
    			success: function(array) {
    				$('#districtId').append('<option value="">地区</option>');
    				for (var i = 0; i < array.length; i++) {
    					var obj = array[i];
    					var option = '<option value="' + obj.id + '">' + obj.name + '</option>';
    					$('#districtId').append(option);	
    				}
    			}
    		});
    	}
    });
    
    var timer = null;
    function getSmsCode(obj) {
    	if(timer != null) {
    		alert("对不起，已经发送了短信验证码，请读秒结束后再重新发送!");
    	} else {
    		var mobile = $('#mobile').val();
        	var json = {'mobile':mobile};
        	$.ajax({
        		url: "${ctx}/user/getSmsValiCode",
        		data:json,
        		dataType: "json",
        		type: "get",
        		success: function(data) {
        			if (data.success) {
        				secondsCount(obj);
        				//loading带文字
        			} else {
        				layer.alert(data.msg,{icon:2,skin: 'layer-ext-moon'});
        			}
        		}
        	});
    	}
    	return false;
    }
    
    function secondsCount(obj) {
    	var seconds = 60;
    	timer = setInterval(function(){
    		if(seconds > 0) {
    			$(obj).html(seconds--+"秒后重发...");
    		} else {
    			stopCount(obj);
    		}
    	},1000);
    }
    
    function stopCount(obj) {
    	clearInterval(timer);
    	$(obj).html("重新获取验证码");
    	timer = null;
    }
    
    function form_submit() {
    	var arr = new Array();
    	info = $('#registerForm').serializeArray();
    	var json = {};
    	for(var i = 0;i < info.length; i ++ ) {
    		var theArr = info[i];
    		var key = theArr.name;
    		var value = theArr.value;
    		json[key] = value;
    	} 
    	$.ajax({
    		url: "${ctx}/user/doCompanyMiniReg",
    		data:json,
    		dataType: "json",
    		type: "post",
    		success: function(data) {
    			if (data.success) {
    				//loading带文字
    				layer.msg('提交成功，正在进行跳转...',{time: 5000, icon:6,shade: [0.5, '#f5f5f5']});
    				location.href = '${ctx}/user/goNextStep?registerType=mini&step=2';
    			} else {
    				layer.alert(data.msg,{icon:2,skin: 'layer-ext-moon'});
    			}
    		}
    	});
    	return false;
    }
</script>
</body>
</html>
